Styling the Last Element of a List with :last-child
To style only the last element of a list, CSS provides the :last-child pseudo-class. It targets the last child element within its parent container.
:last-child– Selects the last element among its siblings.Works with any element type, not just list items.
Can be combined with other selectors for more precise targeting.
In this example, only the last <li> (Item 4) receives the light coral background, bold text, and white color, clearly distinguishing it from the other list items.
Use
:last-childwhen you want to target the final element of a container without adding extra classes or IDs.Combine with other pseudo-classes like
:not()or:nth-last-child()for more complex patterns.Be aware that dynamic changes to the list (adding/removing items) will affect which element is considered the last.
Test across browsers, as
:last-childis widely supported but interactions with other pseudo-classes may need verification.